<template>
  <div class="app-container">
    <el-button @click="findCar">查看购物车</el-button>
    <br>


    <div class="item-info">
      <div class="sku-div">
        <div class="sku-img-info">
          <img class="sku-img" :src="itemSkuInfo.skuDefaultImg" alt="损坏">
          <h1><b><span class="sku-title">
          {{itemSkuInfo.skuName}}
        </span></b></h1>
          <h3>
            <span>价格：{{itemSkuInfo.price}}</span>
            <br>
            <br>
            <span>库存：{{itemSkuInfo.saleCount}}</span>
          </h3>
          <div class="attr-info" v-for="(item, index) in itemSaleAttrs" :key="item.attrId">
            {{ item.attrName }}：
            <el-button v-for="(attrValue, index) in item.attrValues.split(',')" color="#626aef" plain @click="getAttrValue(attrValue)">
              {{ attrValue }}
            </el-button>
          </div>
          <br>
<!--          <div class="attr">-->
<!--            <div class="attr-group" v-for="item in data.itemInfo.itemGroupBaseAttrs">-->
<!--          <span class="attr-group-info">-->
<!--            {{ item.attrGroupName }}：-->
<!--            <br>-->
<!--            <span v-for="list in item.itemBaseAttrVOList">{{ list.attrName }}：{{ list.attrValue }}<br></span>-->
<!--          </span>-->
<!--            </div>-->
<!--            <div class="clearfix"></div>-->
<!--          </div>-->
<!--          <el-form>-->
<!--            <el-form-item>-->
<!--              <el-input-number-->
<!--                  style="margin-right: 10px;width: 100px;"-->
<!--                  v-model="userCartAttrRequest.commodityNumber"-->
<!--                  class="mx-4"-->
<!--                  :min="1"-->
<!--                  :max="10"-->
<!--                  controls-position="right"-->
<!--              />-->
<!--              <el-button-group class="order-sku-button">-->
<!--                <el-button type="danger" color="red" @click="insertCartInfo">加入购物车</el-button>-->
<!--                <el-button type="danger" color="red">立即购买</el-button>-->
<!--              </el-button-group>-->
<!--            </el-form-item>-->
<!--            <div class="clearfix"></div>-->
<!--          </el-form>-->
          <div class="clearfix"></div>
        </div>
        <br>
<!--        <div class="spu-desc">-->
<!--          <img style="width: 900px;" :src="data.itemInfo.itemSpuInfoDesc.decript">-->
<!--        </div>-->
        <br>
<!--        <div class="sku-imgs">-->
<!--          <div v-for="item in data.itemInfo.itemSkuImages">-->
<!--            <img style="width: 900px;" :src="item.imgUrl" alt="损坏">-->
<!--          </div>-->
<!--        </div>-->
        <br>
      </div>
    </div>
  </div>
  <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
  <br><el-button @click="toCar(num)">添加到购物车</el-button>
</template>

<script setup>

import {listItem} from "@/api/product/item.js";
import {shopCarAdd} from "@/api/shopcar/shopcar.js";
import { useRoute } from 'vue-router'
const itemList = ref([]);
const data = reactive({
  form: {},
   itemSaleAttrs : [
    {
      attrId: '',
      attrName: "",
      attrValues: ""
    }
  ],

   itemSkuImages : [
    {
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
      remark: null,
      id: '',
      skuId: '',
      imgUrl: "",
      imgSort: '',
      defaultImg: ''
    },
    // 添加其他图片对象
  ],

  itemGroupBaseAttoVos: [
    {
      attrGroupName: "信息",
      itemBaseAttrVoList: [
        { attrName: "上市年份", attrValue: "2020" },
        { attrName: "颜色", attrValue: "流光幻镜" }
      ]
    },
    // 添加其他属性组对象
  ],
  rules: {
  }
});

import { reactive } from 'vue';

// 定义一个响应式对象来存储 itemSkuInfo
const itemSkuInfo = reactive({
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  remark: null,
  skuId: '',
  spuId: '',
  skuName: "",
  // 其他属性...
  price: '',
  saleCount: ''
});

const vals = ref('');
const { proxy } = getCurrentInstance();
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
const {  form, rules,itemSaleAttrs,itemSkuImages,itemGroupBaseAttoVos } = toRefs(data);
const route=useRoute();
const skuId = ref(route.query.skuId);
import { useRouter } from 'vue-router'
const router=useRouter();
function getAttrValue(val) {
// console.log(val);
  if (null != vals.value && '' != vals.value && undefined != vals.value) {
    var strings = vals.value.split('，');
    if (strings.length >= 2) {
      vals.value = val;
      return;
    }
    vals.value += '，' + val;
    // console.log(vals.value)
    return;
  }
  vals.value = val;
  // console.log(vals.value)
}
function toCar(num) {
  console.log(skuId.value)
  console.log(num)
  console.log(vals.value)
  const skuIdValue = skuId.value;
  const localSkuId = BigInt(skuIdValue); // 修改此处的变量名
  const numValue = num;
  const detailsCount = BigInt(numValue);
  shopCarAdd(localSkuId, detailsCount).then(res => {
    alert(res.msg);
  });
}
function findCar(){
  router.push({path: "/shopCar"})
}
function getList() {
  listItem(skuId.value).then(response => {
    itemList.value = response.data;
    // 将 response 中的数据赋值给 itemSkuInfo 对象
    Object.assign(itemSkuInfo, response.data.itemSkuInfo);
    data.itemSaleAttrs=response.data.itemSaleAttrs

  });
}
getList()
</script>
<style scoped lang="scss">
.custom-box {
  width: 200px;
  height: 100px;
}

.sku-title {
  color: #5a5e66;
}
.item-info {
  margin-left: 200px;
  //border: 1px dashed red;
}
.sku-div {
  margin-top: -6px;
  width: 1000px;
  height: 500px;
  //border: 1px dashed red;
}
.attr {
  margin: 30px 0 25px 165px;
  width: 790px;
  height: 105px;
  //border: 1px dashed darkred;
}
.attr-group {
  width: 200px;
  height: 100px;
  float: left;
  font-size: 17px;
  color: #5a5e66;
  margin-right: 40px;
  //border: 1px dashed darkred;
}
.attr-group-info {

}
.order-sku-button {
  margin: 10px 0 10px 0;
}
.sku-img-info {
  float: left;
  height: 500px;
  //border: 1px dashed darkred;
}
.sku-img {
  margin: 0 10px 10px 0;
  //border: 1px dashed darkred;
}
.attr-info {
  margin: 10px 0 20px 0;
}
.sku-imgs {
  width: 1000px;
  margin: 10px 0 5px 0;
  //border: 1px dashed red;
}
.spu-desc {
  width: 1000px;
  margin: 10px 0 5px 0;
  //border: 1px dashed red;
}
</style>
